import { injectGlobal } from 'styled-components'

const $px5 = '5px'
const $px10 = '10px'

injectGlobal`
  html,
  body {
    width: 100%;
    height: 100%;
    font-size: 12px;
  }

  #root, .App {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .pull-left {
    float: left;
  }

  .pull-right {
    float: right;
  }

  .clear:after {
    display: block;
    content: "";
    clear: both;
  }

  .flexBox {
    display: flex;
  }

  .flexCenterBox {
    display: flex;
    align-items: center;
  }

  .w100 {
    width: 100%;
  }

  .h100 {
    height: 100%;
  }

  .fontSize12 {
    font-size: 12px;
  }

  .fontSize14 {
    font-size: 14px;
  }

  .fontSize16 {
    font-size: 16px;
  }

  .margin5 {
    margin: ${$px5};
  }
  .marginL5 {
    margin-left: ${$px5};
  }
  .marginR5 {
    margin-right: ${$px5};
  }
  .marginT5 {
    margin-top: ${$px5};
  }
  .marginB5 {
    margin-bottom: ${$px5};
  }

  .padding5 {
    padding: ${$px5};
  }
  .paddingL5 {
    padding-left: ${$px5};
  }
  .paddingR5 {
    padding-right: ${$px5};
  }
  .paddingT5 {
    padding-top: ${$px5};
  }
  .paddingB5 {
    padding-bottom: ${$px5};
  }

  .margin10 {
    margin: ${$px10};
  }
  .marginL10 {
    margin-left: ${$px10};
  }
  .marginR10 {
    margin-right: ${$px10};
  }
  .marginT10 {
    margin-top: ${$px10};
  }
  .marginB10 {
    margin-bottom: ${$px10};
  }

  .padding10 {
    padding: ${$px10};
  }
  .paddingL10 {
    padding-left: ${$px10};
  }
  .paddingR10 {
    padding-right: ${$px10};
  }
  .paddingT10 {
    padding-top: ${$px10};
  }
  .paddingB10 {
    padding-bottom: ${$px10};
  }
`
